<?php require("admin-header.php");
require_once("../include/set_get_key.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title> 用户管理 </title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<center><h2>用户管理</h2></center>
<div id="user_list">
    <form class=center @submit.prevent="searchUser">
        <input name=keyword style="height:30px;" v-model="keyWord"  placeholder="请输入用户信息">
        <select name=zzstatus style="width:100px;height:29px;" v-model="zzStatus">
            <option value="-1" selected>不限</option>
            <option value ="1">授课教师</option>
            <option value ="2">学生家长</option>
            <option value ="6">学生-已试听</option>
            <option value ="7">学生-学习中</option>
            <option value ="9">学生-已毕业</option>
        </select>
        <input type=submit value="查找" >
        <input type="button" v-on:click="AddUser()" value="添加用户">
    </form>


    <center><table class='table table-striped' width=90% border=1>
            <tr><td>ID<td>用户名<td>已激活<td>用户类型<td>学校<td>最近登录时间<td>最后一次登录IP<td>操作</tr>
            <tr	v-for="user in users">
                <td><a :href="userInfoUrl(user.id)">{{user.id}}</a>
                <td>{{user.name}}
                <td><a :href="availableChgUrl(user.id, )">
                        <span v-if="user.available" class=green>Available</span>
                        <span v-else class=red>Reserved</span>
                    </a>
                <td>
                    <span v-if="user.zzstatus==1" class=green>{{zzstatusDesc(user.zzstatus)}}</span>
                    <span v-else>{{zzstatusDesc(user.zzstatus)}}</span>
                <td>{{user.school}}
                <td>{{user.accesstime}}
                <td>{{user.access_ip}}
                <td><button v-on:click="EditUser(user)">编辑</button>
            </tr>
        </table></center>
</div>

<script>
    var app = new Vue({
        el: "#user_list",
        data:{
            keyWord: "",
            zzStatus: -1,
            users: []
        },

        mounted:function () {
            this.searchUser();
        },

        methods:{

            // 查找用户
            searchUser:function() {
                let param="op=search"+"&keyword=" + this.keyWord + "&zzstatus="+this.zzStatus;
                $.ajax({
                    type:'get',
                    url:'service/user_service.php',
                    data:param,
                    dataType:'json',
                    success:function (jsonData) {
                        app.users = jsonData.data;
                    }
                });
            },

            userInfoUrl:function(userId) {

            },
            availableChgUrl:function(userId, isAvail) {
                let url = "user_df_change.php?cid=";
                url += userId;
                url += "&getkey="+"<?php echo $_SESSION['getkey']?>";
                return url;
            },
            zzstatusDesc:function(zzstatus) {
                let desc = '未参加'
                switch(zzstatus)
                {
                    case 0:
                        desc = "已试听";
                        break;

                    case 1:
                        desc = "学习中";
                        break;

                    case 2:
                        desc = "已暂停";
                        break;

                    case 3:
                        desc = "已学完";
                        break;
                }
                return desc;
            },

            EditUser:function(userInfo) {
                alert(userInfo.id);
            },

            AddUser:function() {
                alert('xx122xxxxx');
            }
        }
    });
</script>
</body>
</html>
<?php
require("../oj-footer.php");
?>
